<template>
  <div class="dv-main">
    <div class="tit">
      <span>今日接访情况</span>
      <p></p>
    </div>
    <div class="div-ul clearfix">
      <ul>
        <li class="clearfix">
          <div class="icon">
            <img src="../../assets/img/icona.png" class="img" />
          </div>
          <div class="div-info">
            <span>员工总数</span>
            <p><em class="digit">103</em><i>人</i></p>
          </div>
        </li>
        <li>
          <div class="icon">
            <img src="../../assets/img/iconf.png" class="img" />
          </div>
          <div class="div-info">
            <span>现场人员</span>
            <p><em class="digit">90</em><i>人</i></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
};
</script>

<style scoped>
@import url("../../assets/css/fonts.css");
.dv-main {
  height: 100%;
  width: 100%;
  display: block;
  color: #daf9ff;
  /* border: 1px solid #08416f; */
  padding: 10px 10px;
  border-radius: 5px;
  background-color: rgba(72, 80, 93, 0.3);
}
.digit {
  font-family: "electronicFont";
  background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
  font-style: normal;
  background-size: cover;
  font-size: 38px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tit {
  display: flex;
  align-items: flex-end;
  height: 37px;
}

.tit span {
  background: url("../../assets/img/line1.png") no-repeat bottom right;
  font-size: 20px;
  white-space: nowrap;
  padding-bottom: 10px;
  padding-right: 20px;
}

.tit p {
  background: url("../../assets/img/line2.png") no-repeat bottom right;
  width: 100%;
  height: 13px;
  margin-bottom: 5px;
  opacity: 0.5;
}

.div-ul {
  height: calc(100% - 37px);
  padding: 0px;
  display: block;
}

.div-ul ul {
  padding-left: 30px;
  height: 100%;
}

.div-ul li {
  height: 50%;
  width: 100%;
  float: left;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-family: 微软雅黑;
  font-weight: bolder;
  vertical-align: middle;
}

.div-ul li i {
  padding-left: 10px;
  opacity: 0.5;
}

.div-ul li span {
  opacity: 0.5;
}

.div-info {
  width: calc(100% - 65px);
  display: flex;
}

.div-info span {
    line-height: 38px;
    margin-right: 20%;
    font-size: 20px;
}

.icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.img {
  height: 25px;
  width: 30px;
}

.clearfix:after,
.clearfix:before {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}
</style>
